<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Canvas星星跟流星背景动画特效 - 站长素材</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
        }
    </style>

</head>

<body>

    <div class="canvas-box">
        <canvas id="canvas">你的浏览器不支持canvas</canvas>
    </div>

    <script>
        /*▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼*/
        var WINDOW_WIDTH = document.body.offsetWidth;
        var WINDOW_HEIGHT = document.body.offsetHeight;
        var canvas, context;
        /*▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲*/
        canvas = document.getElementById('canvas');
        canvas.width = WINDOW_WIDTH;
        canvas.height = WINDOW_HEIGHT;
        context = canvas.getContext('2d');

        // context.fillStyle = 'rgba(100,0,255,1)';
        // context.fillRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT);

        var imageFromPath = function (path) {
            var img = new Image()
            img.src = path
            return img
        }
        /*
        img:new Image()
        pos:'left','right'
        */
        var drawImage = function (img, pos) {
            var divWidth = canvas.width - 100;
            var o = {};
            o['left'] = function () {
                context.drawImage(img, 0, 0, 100, 100)
            };
            o['right'] = function () {
                context.drawImage(img, divWidth, 0, 100, 100)
            };
            o[pos]();
        }
        var _line = function () {
            context.beginPath();
            context.moveTo(100, 50);
            context.lineTo(canvas.width - 100, 50);
            context.lineWidth = 0.1;//线条的宽度
            context.strokeStyle = "#245";//线条的颜色
            context.stroke();
            context.closePath();
        }

        var star = {
            x: 100,
            y: 50,
            r: 10,
            ra: Math.random()*0.05,
            rr: 0.15,
            vx: 0.6,
            alpha: 1,
            len:300
        }

        var _star = function (star) {
            var PI = Math.PI;
            
            // star.r += star.rr;
            star.x += star.vx;
            if (star.r > 10) {
                star.r = 10;
                star.rr = -star.rr;
            } else if (star.r <= 0) {
                star.r = 0;
                star.rr = -star.rr;
            }
            //这个是一闪一闪的效果
            star.alpha += star.ra;
            if (star.alpha > 1) {
                star.alpha = 1;
                star.ra = -star.ra;

            } else if (star.alpha <= 0) {
                star.alpha = 0;
                star.ra = -star.ra;

            }

            if(star.x>canvas.width - 100){
                star.x = 100;
            }
            context.beginPath();
            
            context.lineWidth = 0;
            var bg = context.createRadialGradient(star.x, star.y, 0, star.x, star.y, star.r);
            // bg.addColorStop(0, 'rgba(255,255,255,' + star.alpha + ')')
            bg.addColorStop(0, 'rgba(0,200,0,' + star.alpha + ')')
            bg.addColorStop(1, 'rgba(0,200,0,0)')
            context.fillStyle = bg;
            context.arc(star.x, star.y, 15, 0,  PI / 4, 5 * PI / 4);
            // context.fillStyle = 'rgba(0,0,0,1)';
            context.lineTo(star.x + star.len, star.y - star.len)
            context.fill();

            
            context.closePath();
        }

        var _userImage = function (url, pos) {

            var img = imageFromPath(url)

            if (img.complete) {
                drawImage(img, pos);
            } else {
                img.onload = function () {
                    drawImage(img, pos);
                };
                img.onerror = function () {
                    window.alert('图片加载失败，请重试');
                };
            };
        }
        // var _render = function () {
        //     setInterval(function () {
        //         _star(star);
        //     }, 33)
        // }
        var _main = function () {
            context.clearRect(0, 0, canvas.width, canvas.height);
            _userImage('./images/u.jpg', 'left');
            _userImage('./images/u.jpg', 'right');
            _line();
            _star(star);
        }
        setInterval(function () {
            _main();
        }, 33)
        
        // _star(star);
    </script>

</body>

</html>